﻿@page "/tests/modals";
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Modals (Configuration)</CardTitle>
            </CardHeader>
            <CardBody>
                <Row>
                    <Column>
                        <Switch @bind-Checked="@animation">Animation</Switch>
                    </Column>
                    <Column>
                        <NumericEdit TValue="int" @bind-Value="animationDuration">Animation Duration (ms)</NumericEdit>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Modals (Default)</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    A rendered modal with header, body, and set of actions in the footer.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default ))">
                    Standard Modal
                </Button>
                <Button Color="Color.Success" Clicked="@(()=>ShowModal( ModalSize.Small ))">
                    Small Modal
                </Button>
                <Button Color="Color.Info" Clicked="@(()=>ShowModal( ModalSize.Large ))">
                    Large Modal
                </Button>
                <Button Color="Color.Info" Clicked="@(()=>ShowModal( ModalSize.Fullscreen, null, false ))">
                    Full Screen
                </Button>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default, null, true ))">
                    Centered Modal
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Modals (Sized)</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Examples of custom size modals.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Info" Clicked="@(()=>ShowModal( ModalSize.ExtraLarge ))">
                    Extra Large Modal
                </Button>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default, 50 ))">
                    Sized Modal (Body Height 50%)
                </Button>
                <Button Color="Color.Secondary" Clicked="@(()=>ShowModal( ModalSize.Default, 20 ))">
                    Sized Modal (Body Height 20%)
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Modals (Render Modes)</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Example of modal render modes.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>ShowDefaultModal())">
                    Default Load Modal
                </Button>
                <Button Color="Color.Success" Clicked="@(()=>ShowLazyModal())">
                    Lazy Load Modal
                </Button>
                <Button Color="Color.Info" Clicked="@(()=>ShowLazyReloadModal())">
                    Lazy Reload Modal
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>

<Modal @ref="modalRef" Animated="animation" AnimationDuration="animationDuration">
    <ModalContent Size="@modalSize" Centered="@centered">
        <ModalHeader>
            <ModalTitle>
                <Icon Name="IconName.Edit" />
                Employee edit
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody MaxHeight="@maxHeight">
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Autofocus Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
            <Field>
                <FieldLabel>Date of birth</FieldLabel>
                <DateEdit TValue="DateTime?" Placeholder="Pick a date" />
            </Field>
            <Field>
                <Button Color="Color.Primary" Clicked="@ShowModal2">Show second modal</Button>
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Cancel</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>
<Modal @ref="modalRef2" Animated="animation" AnimationDuration="animationDuration">
    <ModalContent Size="ModalSize.Small" Centered>
        <ModalHeader>
            <ModalTitle>
                Hello
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            I am a second modal with some message.
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal2">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

<Modal @ref="defaultModalRef" Animated="animation" AnimationDuration="animationDuration" RenderMode="ModalRenderMode.Default">
    <ModalContent Size="ModalSize.Small" Centered>
        <ModalHeader>
            <ModalTitle>
                Default Load
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Paragraph>
                The component below started loading as soon as the page loaded.
            </Paragraph>
            <Paragraph>You will notice that after it has finished loading, if you open the modal back again it will not load back again.</Paragraph>
            <DoingWorkComponent />
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideDefaultModal">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>


<Modal @ref="lazyModalRef" Animated="animation" AnimationDuration="animationDuration" RenderMode="ModalRenderMode.LazyLoad">
    <ModalContent Size="ModalSize.Small" Centered>
        <ModalHeader>
            <ModalTitle>
                Lazy Load
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Paragraph>
                The component below starts loading the first time you visit it...
            </Paragraph>
            <Paragraph>
                You will notice that after it has finished loading, if you open the modal back again it will not load back again.
            </Paragraph>
            <DoingWorkComponent />
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideLazyModal">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>


<Modal @ref="lazyReloadModalRef" Animated="animation" AnimationDuration="animationDuration" RenderMode="ModalRenderMode.LazyReload">
    <ModalContent Size="ModalSize.Small" Centered>
        <ModalHeader>
            <ModalTitle>
                Lazy Reload
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Paragraph>
                The component below has just started loading...
            </Paragraph>
            <Paragraph>
                You will notice that after it has finished loading, if you open the modal back again it will reload back again.
            </Paragraph>
            <DoingWorkComponent />
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideLazyReloadModal">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>
@code {
    private Modal modalRef;
    private Modal modalRef2;
    private Modal defaultModalRef;
    private Modal lazyModalRef;
    private Modal lazyReloadModalRef;
    private bool centered = false;
    private ModalSize modalSize = ModalSize.Default;
    private int? maxHeight = null;
    private bool animation = true;
    private int animationDuration = 150;

    private Task ShowModal( ModalSize modalSize, int? maxHeight = null, bool centered = false )
    {
        this.centered = centered;
        this.modalSize = modalSize;
        this.maxHeight = maxHeight;

        return modalRef.Show();
    }

    private Task HideModal()
    {
        return modalRef.Hide();
    }

    private Task ShowModal2()
    {
        return modalRef2.Show();
    }

    private Task HideModal2()
    {
        return modalRef2.Hide();
    }

    private Task ShowLazyModal()
    {
        return lazyModalRef.Show();
    }

    private Task HideLazyModal()
    {
        return lazyModalRef.Hide();
    }

    private Task ShowDefaultModal()
    {
        return defaultModalRef.Show();
    }

    private Task HideDefaultModal()
    {
        return defaultModalRef.Hide();
    }

    private Task ShowLazyReloadModal()
    {
        return lazyReloadModalRef.Show();
    }

    private Task HideLazyReloadModal()
    {
        return lazyReloadModalRef.Hide();
    }

}
